<template>
    <div>
        <a-modal title="转办" centered v-model:visible="visible" :width="600" okText="保存" @ok="handleSave" @cancel="handleCancel">
            <a-form ref="ruleFormRef" labelAlign="left" layout="inline" :model="form" :rules="rules">
                <a-form-item label="人员" v-if="visible" name="agentUserEmpId">
                    <div>
                        <h-search-select-cell type="allUser" label="name" keyField="empId" allowClear @success="handleSelectChange">
                            <template #label="{ record }"> {{ record.name }}（{{ record.empId }}） </template>
                        </h-search-select-cell>
                    </div>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { HSearchSelectCell } from '@/components';
import { defineComponent, reactive, toRefs, ref, unref, nextTick } from 'vue';
export default defineComponent({
    components: {
        HSearchSelectCell
    },
    emits: ['success'],
    setup(_, { emit }) {
        const ruleFormRef = ref<any>();
        const state = reactive<any>({
            form: {
                agentUserEmpId: null,
                agentUser: null
            },
            visible: false
        });
        const rules = {
            agentUserEmpId: [{ required: true, message: '转办人员不能为空', trigger: 'blur' }]
        };
        const open = () => {
            state.visible = true;
            state.form = {
                agentUserEmpId: null,
                agentUser: null
            };
            nextTick(() => {
                unref(ruleFormRef) && unref(ruleFormRef).clearValidate();
            });
        };
        const handleSelectChange = (val) => {
            if (val && val.empId) {
                state.form.agentUserEmpId = val.empId;
                state.form.agentUser = val.name;
            } else {
                state.form.agentUserEmpId = null;
                state.form.agentUser = null;
            }
        };
        const handleSave = async () => {
            unref(ruleFormRef)
                .validate()
                .then(() => {
                    emit('success', state.form);
                    handleCancel();
                });
        };
        const handleCancel = () => {
            state.visible = false;
        };
        return {
            ruleFormRef,
            ...toRefs(state),
            rules,
            open,
            handleSave,
            handleCancel,
            handleSelectChange
        };
    }
});
</script>

<style scoped lang="less">
::v-deep(.ant-form-item-label-left) {
    min-width: 0 !important;
}
</style>